<template>
  <div>
    <van-nav-bar
        title="付款页面"
        left-text="返回"
        right-text="按钮"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
    />
    <van-cell is-link @click="showPopup">点击付款</van-cell>
    <van-popup
        v-model="show"
        closeable
        position="bottom"
        :style="{ height: '30%' }"
    >
      <div style="text-align: center;margin-top: 15px">
        剩余支付时间,请尽快完成付款
      </div>
      <van-count-down :time="time" style="margin-left: 160px;margin-top: 20px">
        <template #default="timeData">
          <span class="block">{{ timeData.minutes }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.seconds }}</span>
        </template>
      </van-count-down>
      <van-dropdown-menu style="margin-top: 10px">
        <van-dropdown-item v-model="value1" :options="option1" />
      </van-dropdown-menu>
      <van-button color="linear-gradient(to right, #ff6034, #ee0a24) " style="margin-left: 150px;margin-top: 10px">
        立即支付
      </van-button>
    </van-popup>
  </div>
</template>

<script>
import {Toast} from "vant";

export default {
  name: "payment",
  data() {
    return {
      value1: 0,
      option1: [
        { text: '微信支付', value: 0 },
        { text: '支付宝支付', value: 1 },
        { text: '银行卡支付', value: 2 },
      ],
      show: false,
      time:  15 * 60 * 1000
    };
  },

  methods: {
    showPopup() {
      this.show = true;
    },
    onClickLeft() {
      Toast('返回');
    },
    onClickRight() {
      Toast('按钮');
    },
  },
}
</script>

<style>
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}
</style>